import { useLocalStore, useObserver } from 'mobx-react';
import { applySnapshot, getSnapshot, types, unprotect } from 'mobx-state-tree';
import React from 'react';

const DataItem = types.model({
  columnName: types.string,
  label: types.optional(types.string, ''),
  color: types.optional(types.string, ''),
});
const DataSrcDef = types.model({
  columns: types.optional(types.array(DataItem), []),
  api: '',
}).actions(self => {
  return {
    afterCreate() {
      // self.loadFromDb();
    },
  }
});


function load() {
  const instance = DataSrcDef.create({
    api: '/oss/abc/cpu',
    columns: [
      { color: 'red', columnName: 'cpu-rate', label: 'cpu利用率' },
      { color: 'green', columnName: 'cpu-count', label: 'cpu个数' },
    ]
  })
  unprotect(instance);
  return instance;
}


export default function DataSrcConfig() {
  const dataSrcDef = useLocalStore(load);
  return useObserver(() => (
    <div>
      <div>
        <button onClick={() => dataSrcDef.columns[0].label = 'xxxxLabel'}>change</button>
      </div>
      <pre>{JSON.stringify(getSnapshot(dataSrcDef), null, 2)}</pre>
    </div>

  ));
}
